import { defineComponent, provide } from 'vue'
import SvgConfig from './components/SvgConfig'
import SvgPreview from './components/SvgPreview'
import { createSvgState, injectSvgStateKey } from './hooks/useSvgState'


export default defineComponent({
  name: 'SvgDesign',
  setup () {
    provide(injectSvgStateKey, createSvgState())
    return () => {
      return (
        <a-layout class="h-full overflow-hidden">
          <a-layout-content class="bg-white overflow-y-auto">
            <SvgConfig />
          </a-layout-content>
          <a-layout-sider class="bg-white pl-4" width="400">
            <div class="w-full h-full flex-center">
              <SvgPreview />
            </div>
          </a-layout-sider>
        </a-layout>
      )
    }
  }
})
